<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit"/>
		<meta name="force-rendering" content="webkit"/>
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
		<title>Summary</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
		<#include "/include/new_resource.html"/>
		<style>
			.uploadFile {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 2;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="summary-box">
				<div class="hd">
					<h3>Summary</h3>
					<div class="btns g-button-wrap">
						<button class="colse-button g-button-style" onclick="history.back();" type="button">Close</button>
					</div>
				</div>
				<div class="bd">
					<div class="information item">
						<div class="title g-title">
							<h3>Basic Information</h3>
						</div>
						<div class="content">
							<div class="stetup-photos">
								<div class="photos-wrap">
									<div class="img">
										<input type="file" class="uploadFile" name="mainFile" accept="image/*"
											   id="mainUpload" multiple="">
										<input type="hidden" name="img" id="mainUploadImgInput" value="${template.img!}">
										<img src="${base}${template.img!}" id="mainUploadImg" alt="">
									</div>
								</div>
								<div class="optional">
									<div class="tit">Setup Photos (Optional)</div>
								</div>
								<div class="photos-list ">
									<div class="file">
										<input type="file" name="file" accept="image/*" id="upload" multiple="">
										<div class="desc">
											<div class="box">
												<p class="t1">Drag and drop images here</p>
												<p class="t2">- or -</p>
												<p class="t3">Browse files from your computer</p>
											</div>
										</div>
									</div>
									<div class="content-img scrollBox">
										<ul class="content-img-list ">
											<li>
												<div class="img">
													<img src="images/img_02.png" alt="">
												</div>
											</li>
											<li>
												<div class="img">
													<img src="images/img_03.png" alt="">
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="info">
								<div class="result-box">
									<div class="left">
										<ul>
											<li>
												<div class="tit">
													ID
												</div>
												<div class="content">
													<p>${template.id!}</p>
												</div>
											</li>
											<li>
												<div class="tit">
													Name
												</div>
												<div class="content">
													<p>${template.name!}</p>
												</div>
											</li>
											<li>
												<div class="tit">
													Client
												</div>
												<div class="content">
													<div class="input-box">
														<div id="select-client" class="xm-select-item"></div>
													</div>
												</div>
											</li>
											<li>
												<div class="tit">
													Product Category
												</div>
												<div class="content">
													<div class="input-box">
														<div id="select-category" class="xm-select-item"></div>
													</div>
												</div>
											</li>
											<li>
												<div class="tit">
													Background Style
												</div>
												<div class="content">
													<p>${template.photoType!}</p>
												</div>
											</li>
											<li>
												<div class="tit">
													Props
												</div>
												<div class="content">
													<p>${template.props!}</p>
												</div>
											</li>
											<li>
												<div class="tit">
													Notes (Optional)
												</div>
												<div class="content">
													<p>${template.memo!}</p>
												</div>
											</li>
										</ul>
									</div>
									<div class="right">
										<ul>
											<li>
												<div class="tit">
													Photo Style
												</div>
												<div class="content">
													<p>${template.photoStyle!}</p>
												</div>
											</li>
											<li>
												<div class="tit">
													Lighting Style
												</div>
												<div class="content">
													<p>${template.lightingStyle!}</p>
												</div>
											</li>
											<li>
												<div class="tit">
													Photo Style
												</div>
												<div class="content">
													<p>${template.photoStyle!}</p>
												</div>
											</li>
											<li>
												<div class="tit">
													Scene Style
												</div>
												<div class="content">
													<p>${template.sceneStyle!}</p>
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="edit-button">
							<button class="g-button-style" type="button">Edit</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 遮罩层 -->
		<div class="shade"></div>
		<<#include "/include/new_js_resource.html"/>
		<script src="${base}/static/js/uploadimg.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let baseUrl = '${base}';
			let clientName_select;
			let productCategory_select;
			let img1 = '${template.img1!}';
			let img2 = '${template.img2!}';
			let img3 = '${template.img3!}';
			let img4 = '${template.img4!}';
			let img5 = '${template.img5!}';
			initImgs(img1);
			initImgs(img2);
			initImgs(img3);
			initImgs(img4);
			initImgs(img5);
			addNewContent(imgBox);

			function initImgs(img) {
				if (img) {
					imgFile.push(img);
					imgSrc.push(baseUrl + img);
					imgName.push(img);
					imgUploadUrl.push(img);
				}
			}

			function save() {
				imgUploadUrl.forEach((obj, i) => {
					$("input[name='img" + (i + 1) + "']").val(obj);
				})
				let clientName_ss = getSelectValue(clientName_select)
				let productCategory_ss = getSelectValue(productCategory_select);
				$("input[name='clientName']").val(clientName_ss);
				$("input[name='productCategory']").val(productCategory_ss);

				HF.ajaxFormSubmit('templateForm', function (result) {
					alert("Save Success");
					// document.location.reload();
				}, function (e) {
					alert("Save Failure");
				});
			}

			function pushImg(obj) {
				var url = '${base}' + "/admin/parameters/mainImgeUpload";
				var files = $("#mainUpload").get(0).files[0]; //获取file控件中的内容
				var fd = new FormData();
				fd.append("uploadFile", files);
				$.ajax({
					type: "POST",
					contentType: false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
					processData: false, //必须false才会自动加上正确的Content-Type
					url: url,
					data: fd,
					success: function (msg) {

						var obj = eval('(' + JSON.stringify(msg) + ')');

						if (obj.SUCESS) {
							let url = '${base}' + obj.DATA;
							//填充图片
							$("#mainUploadImg").attr("src", url);
							//写入隐藏域
							$("#mainUploadImgInput").val(obj.DATA);
						}
					},
					error: function (msg) {
						//debugger;
						alert("error");
					}
				});
			}

			$(function () {
				$(".scrollBox").scrollBar();

				HF.api.get("${base}/api/parameters/options/ClientName", {}).then(function (data) {
					let clientName = '${template.clientName!}';
					if (clientName && clientName.length > 0) {
						data.forEach(d => {
							if (clientName.indexOf(d.value) != -1) {
								d.selected = true;
							}
						})
					}

					clientName_select = xmSelect.render({
						el: '#select-client',
						language: 'en',
						filterable: true,
						tips: 'Search client name',
						data: data
					});
				});

				HF.api.get("${base}/api/parameters/options/ProductCategory", {}).then(function (data) {
					let clientName = '${template.productCategory!}';
					if (clientName && clientName.length > 0) {
						data.forEach(d => {
							if (clientName.indexOf(d.value) != -1) {
								d.selected = true;
							}
						})
					}
					productCategory_select = xmSelect.render({
						el: '#select-category',
						language: 'en',
						tips: 'Search product category',
						filterable: true,
						data: data
					})
				});
			})

			function getSelectValue(category) {
				let objects = category.getValue();
				let values = "";
				if (objects.length > 0) {
					values = objects.reduce((prev, cur) => {
						if (prev && prev.length > 0) {
							return prev + "," + cur.value;
						} else {
							return cur.value;
						}
					}, "")
				}
				return values;
			}
		</script>
	</body>
	
</html>




